<template>
    <div class="showlist">
        <mu-bottom-sheet :open="bottomSheet" @close="closeBottomSheet">
            <div class="title-wrapper">
                播放列表（{{songList.length}}）
            </div>
            <hr class="mu-divider">
            <div class="songList">
                <div class="song-item" v-for="(item,index) in songList">
                    <div class="left" @click="play(index)">
                        <span class="songname">{{item.name}}</span><span class="songsinger">&nbsp;-{{item.singer}}&nbsp;</span>
                    </div>
                    <div class="removebtn" @click='removesong(index)'>x</div>
                    <hr class="mu-divider">
                </div>
            </div>
        </mu-bottom-sheet>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    export default {
        name: 'list',
        data () {
            return {
                bottomSheet: false
            }
        },
        methods:{
            closeBottomSheet () {
                this.bottomSheet = false
                if (document.querySelector('.playList')) {
                    document.querySelector('.playList').style.position = 'static'
                }
            },
            show(){
                this.bottomSheet = true
                if (document.querySelector('.playList')) {
                    document.querySelector('.playList').style.position = 'fixed'
                }
            },
            removesong(index){
                this.$store.commit('removeAudio',index)
            },
            play(index){
                this.$store.commit('setAudioIndex',index)
                this.bottomSheet = false
            }
        },
        computed:{
            ...mapGetters([
                'songList'
            ])
        }
    }
</script>
<style lang="less" scoped>
    @import "../assets/less/comm.less";
    html,body { height:100%; overflow:hidden }
    .title-wrapper{
        font-size: 16px;
        height: 2rem;
        line-height: 2rem;
        color: rgba(0,0,0,.87);
        text-align: center;
    }
    .songList{
         height: 10rem;
        width: 100%;
        padding: 0 10px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        .song-item{
            height: 2rem;
            line-height: 2rem;
            .left{
                max-width: 92%;
                float: left;
                height: 2rem;
                overflow: hidden;
                .songname{
                    float: left;
                    max-width: 72%;
                    height: 2rem;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .songsinger{
                    color: #737171;
                    font-size: 12px;
                }
            }
            .removebtn{
                width: 32px;
                text-align: center;
                float: right;
                color: #737171;
            }
        }
    }


</style>